<script setup>
import { computed, ref, watch } from 'vue';

let familyName = ref("kevin")
let givenName = ref("abcque")

let total = computed(
    ()=>{
        console.log("call computed");
    
    return givenName.value + " " + familyName.value
    }
)


function fullName() {
    console.log("call function fullName()");
    
    return givenName.value + " " + familyName.value
}

// watch(
//     familyName,
//     // 匿名函数的参数是修改后的新值
//     (val)=>{
//         console.log("familyName changed to: " + val);  
//     }
// )

// watch(
//     givenName,
//     // 匿名函数的第一个参数是修改后的新值， 第二个参数是原来的值
//     (newValue, oldValue)=>{
//         console.log("givenName changed from: " + oldValue + " to " + newValue);  
//     }
// )


watch(
    [givenName, familyName],
    (newValue, oldValue)=>{
        // 数组元素的前后顺序影响的是 oldValue 和 newValue 中值的顺序
        console.log("changed from: " + oldValue + " to " + newValue); 
    }
)


</script>

<template>
<h2>{{ givenName }} {{ familyName }}</h2>
<h2>{{  fullName() }}</h2>

<h2>{{ total }}</h2>

</template>

<style>
</style>